<template>
  <div class="time-picker-fixed">
    <div class="time-picker">
      <div class="slider-container">
        <button class="play-pause-button" @click="togglePlayPause">
          {{ isPlaying ? "暂停" : "开始" }}
        </button>
      </div>
      <div class="date-picker">
        <input
          type="date"
          v-model="selectedDate"
          @input="updateTime"
          class="custom-date-input"
        />
      </div>
      <div class="time-selection">
        <select v-model="selectedHour">
          <option v-for="hour in 24" :key="hour" :value="hour - 1">
            {{ hour - 1 }}
          </option>
        </select>
        <span>:</span>
        <select v-model="selectedMinute">
          <option v-for="minute in 60" :key="minute" :value="minute - 1">
            {{ String(minute - 1).padStart(2, "0") }}
          </option>
        </select>
      </div>
      <div class="forecast-selection">
        <label for="forecast"></label>
        <input
          type="number"
          v-model="selectedForecast"
          min="6"
          max="120"
          step="6"
          @input="updateTime"
          id="forecast"
        />
      </div>

      <div class="time-slider">
  <input
    type="range"
    class="slider"
    :min="forecasts[0]"
    :max="forecasts[forecasts.length - 1]"
    step="6"
    v-model="selectedForecast"
    @input="updateTime" 
  />

  <div class="slider-labels">
    <div
      v-for="forecast in forecasts"
      :key="forecast"
      class="slider-tick"
      :style="{ left: ((forecast - forecasts[0]) * 100) / (forecasts[forecasts.length - 1] - forecasts[0]) + '%' }"
    ></div>
  </div>
</div>

<div class="selected-time">
        {{ selectedDate }} {{ formattedStartTime }} 预测时间：{{
          selectedForecast
        }}
        分钟
      </div>
    </div>
  </div>
</template>

<script>
let intervalId = null; // 添加定时器的标志

export default {
  data() {
  return {
    selectedDate: null,
    startMinutes: 378,
    isPlaying: false,
    selectedHour: 0,
    selectedMinute: 0,
    selectedForecast: 6,
  };
},
  computed: {
    forecasts() {
      // 生成20种预测时效，从6分钟开始，每6分钟递增，最大值为120分钟
      return Array.from({ length: 20 }, (_, index) => 6 + index * 6);
    },
  },
  watch: {
    selectedHour: "handleHourMinuteChange",
    selectedMinute: "handleHourMinuteChange",
  },
  methods: {
    handleHourMinuteChange() {
      this.updateTime();
    },
    updateTime() {
      this.$emit("time-range-selected", {
        start: this.selectedForecast, // 使用预测时间而不是实际时间
      });
    },
    togglePlayPause() {
      if (this.isPlaying) {
        clearInterval(intervalId);
      } else {
        this.selectedForecast = 6; // 设置初始的预测时间
        this.$nextTick(() => {
          intervalId = setInterval(this.playTime, 3000);
          this.playTime();
        });
      }
      this.isPlaying = !this.isPlaying;
    },
    playTime() {
      if (this.isPlaying) {
        if (this.selectedForecast < 120) {
          this.selectedForecast += 6; // 根据预测时间前进
        } else {
          this.selectedForecast = 6; // 回到最小的预测时间
        }
        this.updateTime();
      }
    },
  },
  beforeUnmount() {
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
}
};

</script>

<style scoped>
.time-picker-fixed {
  position: fixed;
  top: 70%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中偏移 */
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: transparent;
}
.time-picker {
  justify-content: center;
  width: 1200px;
  display: flex;
  flex-direction: row; /* 水平布局 */
  align-items: center;
  border: 3px solid #007bff;
  padding: 20px;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.date-picker {
  margin-right: 20px; /* 添加右边距 */
}

.custom-date-input {
  border: 2px solid #007bff; /* 添加边框 */
  padding: 8px; /* 添加内边距 */
  border-radius: 4px; /* 添加圆角 */
  font-size: 16px; /* 调整字体大小 */
  color: #007bff; /* 文本颜色设置为蓝色 */
  background-color: transparent; /* 透明背景 */
  transition: border-color 0.3s, background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.custom-date-input:hover {
  border-color: darkblue; /* 悬停时边框颜色变化 */
  background-color: rgba(0, 0, 255, 0.1); /* 悬停时背景颜色变化 */
  color: darkblue; /* 悬停时文本颜色变化 */
}

.slider-container {
  display: flex;
  align-items: center;
  width: 70px;
  margin-right: 20px; /* 添加右边距 */
}

.time-slider {
  width: 1100px;
}
.slider {
  width: 100%;
}

.slider-label {
  flex: 0 0 auto;
  margin-right: 10px;
}

.selected-time {
  font-size: 18px;
  font-weight: bold;
}

.play-pause-button {
  border: 2px solid #007bff;
  background-color: transparent;
  color: #007bff;
  padding: 8px;
  border-radius: 50%; /* 圆形按钮 */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin-right: 10px; /* 修改右边距以减小按钮与时间选择字段之间的距离 */
}

.play-pause-button:hover {
  background-color: blue;
  color: white;
}

.time-selection {
  display: flex;
  align-items: center;
}

.time-selection select {
  padding: 8px;
  border: 2px solid #007bff;
  border-radius: 4px;
  font-size: 16px;
  color: #007bff;
  background-color: transparent;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.time-selection select:hover {
  border-color: darkblue;
  background-color: rgba(0, 0, 255, 0.1);
  color: darkblue;
}

.time-selection span {
  margin: 0 8px; /* 添加间距 */
  font-size: 16px;
}

.forecast-selection {
  display: flex;
  align-items: center;
}

.forecast-selection label {
  margin-right: 10px;
}

.forecast-selection input {
  padding: 8px;
  border: 2px solid #007bff;
  border-radius: 4px;
  font-size: 16px;
  color: #007bff;
  background-color: transparent;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.forecast-selection input:hover {
  border-color: darkblue;
  background-color: rgba(0, 0, 255, 0.1);
  color: darkblue;
}
</style>
